<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	 <meta name="full-screen" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" >
    <meta http-equiv="x-dns-prefetch-control" content="on"/> <!--京东h5规范加速-->
    <link rel="dns-prefetch" href="//wq.360buyimg.com">
	<script type="text/javascript">
window.mobileUtil = (function(win, doc) {
	var UA = navigator.userAgent,
		isAndroid = /android|adr/gi.test(UA),
		isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
		isMobile = isAndroid || isIos;  // 粗略的判断

	return {
		isAndroid: isAndroid,
		isIos: isIos,
		isMobile: isMobile,

        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
		isWeixin: /MicroMessenger/gi.test(UA),
		isQQ: /QQ\/\d/gi.test(UA),
		isYixin: /YiXin/gi.test(UA),
		isWeibo: /Weibo/gi.test(UA),
		isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

		tapEvent: isMobile ? 'tap' : 'click',

		/**
		 * 缩放页面
		 */
		fixScreen: function() {
            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
			    matchWidth = metaCtt.match(/width=([^,\s]+)/);

            if ( !metaEl ) { // REM
                var docEl = doc.documentElement,
                    maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
                    dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                    scale = 1 / dpr,
                    tid;

                docEl.removeAttribute('data-mw');
                docEl.dataset.dpr = dpr;
                metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = fillScale(scale);
                docEl.firstElementChild.appendChild(metaEl);

                var refreshRem = function() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > maxwidth) {
                        width = maxwidth * dpr;
                    }
                    var rem = width / 16;
                    docEl.style.fontSize = rem + 'px';
                };

                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                refreshRem();
            } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                var	width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                    scale = w / width;

                if ( scale < 1 ) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }

            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
            }
		},

		/**
		 * 转href参数成键值对
		 * @param href {string} 指定的href，默认为当前页href
		 * @returns {object} 键值对
		 */
		getSearch: function(href) {
			href = href || win.location.search;
			var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
			href && href.replace(reg,function( $0, $1, $2, $3 ){
				data[ $1 ] = $3;
			});
			return data;
		}
	};
})(window, document);

// 默认直接适配页面
mobileUtil.fixScreen();
	</script>
	<style>	
	      * {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
			a{
		text-decoration: none;
		color: #00a8ff;
	}	
		html {
			background-color: #fff;
		}
		ul, li, p {
			padding: 0px;
			margin: 0px;
			list-style:none;
		}
		body {
			width: 16rem;
			margin: 0 auto;			
			line-height:1.4;
			font-family:"Microsoft YaHei";		
		}
	
      
/*header*/
#header{
	width:16rem;
	height:1.9rem;
	background:#1c1c1c;
}
.header_l{
    width:16rem;
    height:1.9rem;	
    display:inline-block;
    color:#fff;
}
#header a{
	display:inline-block;
	width:4rem;
	height:1.9rem;	
}
.header_l img{
	width:0.512rem;
	height:0.704rem;
	margin:0.512rem 5rem 0 0.512rem;
}
/*content1*/
#container{
	padding-top:0.46rem;	
	width:14.976rem;
	height:21.19rem;
	font-size:0.75rem;
	margin:0 auto;	
}
.row1{
	margin-top:0.32rem;
}
#container img{
	width:14.976rem;
	height:21.6rem;
}
/*导航*/
	.mobile {
		width:16rem;
		float: left; position: relative;		
		overflow: hidden;
	}
	/*Hiding the checkbox*/
	#tm {display: none;}
	/*Content area*/
	.mobile section {		
		width: 16rem; 
		height: 24.5rem;
		position: relative;
		background:#f3f3f3; 
		transition: all 0.25s;
		-webkit-transition: all 0.25s;
		-moz-transition: all 0.25s;
		-o-transition: all 0.25s;
	}
	.mobile section label {
		color: #fff; 
		font: 0.8rem Montserrat;				
		text-align: center;
		border: 2px solid #1c1c1c; 
		border-radius: 4px;
		display: block;
		width: 1.2rem;
		height:1.28rem; 
		position: absolute;
		left: 85%; 
		top:0.15rem;
		cursor: pointer;
		font-size:1rem;
		background:#1c1c1c;	
	}
	/*Nav styles*/
	.sidenav {
	    width: 8rem;
		position: absolute; right:0; top: 0; bottom: 0;
	}
	.sidenav li{		
		width:8rem;		
		list-style-type: none;
	}
	.sidenav li:nth-child(1){
   	 	height:3.02rem;
	}
	.sidenav li:nth-child(2){   	    
   	    height:1.7rem;
   	    padding-top:0.8rem;
		margin-left:0.43rem;
		border-bottom:0.02rem solid #999999;				
	}
	.sidenav li:nth-child(3){
   	    height:1.7rem;
   	    padding-top:0.8rem;
		margin-left:0.43rem;
		border-bottom:0.02rem solid #999999;		
	}
	.sidenav li:nth-child(4){
   	    height:1.7rem;
   	    padding-top:0.8rem;
		margin-left:0.43rem;
		border-bottom:0.02rem solid #999999;		
	}
	.sidenav li:nth-child(5){
   	    height:1.7rem;
   	    padding-top:0.8rem;
		margin-left:0.43rem;
		border-bottom:0.02rem solid #999999;		
	}
    .sidenav li img{    	
    	width:8rem;
    	height:3.02rem;
    }
    .font_mall{
    	color:#999999;
    	font-size:0.5rem;
    	padding-left:2rem;
    }
	.sidenav a { 
		color: #000; 
		text-decoration: none;
		font:0.68rem "Microsoft YaHei";
		display:block;
		transform: translateX(1.06rem);
		opacity:0; 
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;

	}
	
	.sidenav i {
		display: block; width: 50px; float: left; 
		font-size: 0.576rem;		 
		text-align: center;
	}
	/*Animation controls using checkbox hack*/
	/*Animate content area to the right*/
	#tm:checked ~section {transform: translateX(-8rem);}
	#tm:checked ~section{background:#000;opacity:0.6;}
	#tm:checked ~section label{background:#f30a0a;z-index:999;border:1px solid #f30a0a;}
	/*Animate links from right to left + fade in effect*/
	#tm:checked ~ .sidenav a {opacity: 1; transform: translateX(0);}

	/*Adding delay to link animation - in multiples of .08s*/
	/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
	#tm:checked ~ .sidenav li:nth-child(1) a {transition-delay: 0.08s;}
	#tm:checked ~ .sidenav li:nth-child(2) a {transition-delay: 0.16s;}
	#tm:checked ~ .sidenav li:nth-child(3) a {transition-delay: 0.24s;}
	#tm:checked ~ .sidenav li:nth-child(4) a{transition-delay: 0.32s;}
	#tm:checked ~ .sidenav li:nth-child(5) a {transition-delay: 0.40s;}
	#tm:checked ~ .sidenav li:nth-child(6) a {transition-delay: 0.48s;}
	</style>
	<title>全套系统解决方案</title>
</head>
<body>
<!--左侧导航-->	
<div class="mobile">
					<!-- Checkbox to toggle the menu -->
					<input type="checkbox" id="tm" />
                      
					<!-- The menu -->
					<ul class="sidenav">
					    <li class="li_img"><img src="../images/r_logo.png"></li>
						<li><a href="../brand/brand.html"><i class="fa fa-check"></i>品牌介绍&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span class="font_mall">〉</span></a></li>
						<li><a href="../service/service.html"><i class="fa fa-inbox"></i>服务内容&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span class="font_mall">〉</span></a></li>
						<li><a href="../product/product.html"><i class="fa fa-pencil"></i>产品体系&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span class="font_mall">〉</span></a></li>
						<li><a href="../case/case.html"><i class="fa fa-cog"></i>更多案例&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span class="font_mall">〉</span></a></li>
						
					</ul>
					<!-- Content area -->
					<section>
						<!-- Label for #tm checkbox -->
                         <!--banner-->
<!--header-->
<div id="header">
	<div class="header_l">
	<a href="../service/service.html"><img src="../images/icon.png"/></a>
	全套系统解决方案
	</div>
</div>
<!--content1-->
<div id="container">
<div class="row1"><a href="#"><img src="../images/howtodo.png" alt=""></a></div>
</div>
						
<!--结束-->			
<label for="tm">≡</label>
					</section>
				</div>	




</body>
</html>